<template>
  <div class="conMain">
    <el-card class="box-card">
      <div slot="header" class="topfix">
        <el-form :inline="true" :model="params" size="small" class="goodsForm" label-width="100px">
          <el-form-item label="ID">
            <el-input v-model="params.s_agent_id" clearable placeholder="请输入代理ID" />
          </el-form-item>
          <el-form-item label="代理名称">
            <el-input v-model="params['s_agent*name']" clearable placeholder="请输入名称" />
          </el-form-item>

          <el-form-item label="代理级别">
            <el-select v-model="params['s_agent*level']" clearable placeholder="请选择">
              <el-option v-for="(item,index) in levellist" :label="item.txt" :value="item.val" />
            </el-select>
          </el-form-item>

          <el-form-item label="话费面值">
            <el-input v-model="params['s_goods*price']" clearable placeholder="请输入话费面值" />
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="params.s_status" placeholder="请选择">
              <el-option v-for="(item,index) in statuslist" :label="item.txt" :value="item.val" />
            </el-select>
          </el-form-item>
          <el-form-item label=" ">
            <el-button type="primary" size="small" class="searchBtn" icon="el-icon-search" @click="handleSearch">搜索
            </el-button>
            <el-button type="info" plain @click="handleRet">清空</el-button>
          </el-form-item>
        </el-form>
        <div style="text-align: right;">
          <el-button v-has="'agent/agoods/export'" type="primary" size="small" class="ml10" plain @click="down"><i
            class="el-icon-download"
          /> 批量导出</el-button>
        </div>

      </div>
      <el-table v-loading="loading" :data="list" style="width: 100%" :empty-text="emtypetxt">
        <el-table-column prop="agent_id" label="代理ID" align="center" />
        <el-table-column prop="agent.name" label="代理名称" align="center" />
        <el-table-column prop="agent.level" label="代理级别" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.agent.level === 1">一级</span>
            <span v-else-if="scope.row.agent.level === 2">二级</span>
            <span v-else-if="scope.row.agent.level === 3">三级</span>
          </template>
        </el-table-column>
        <el-table-column prop="from" label="所属渠道" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.goods.from == 1">沃券充值</span>
            <span v-else-if="scope.row.goods.from == 2">DR充值</span>
            <span v-else-if="scope.row.goods.from == 3">新号吧充值</span>
          </template>
        </el-table-column>

        <el-table-column prop="goods.price" label="话费面值" align="center" />
        <el-table-column prop="goods.money" label="支付金额" align="center" />

        <el-table-column prop="fee" label="佣金" align="center" />
        <el-table-column label="到账时效" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="success" size="mini" disable-transitions>上线</el-tag>
            <el-tag v-if="scope.row.status === -1" type="info" size="mini" disable-transitions>下线</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="success" size="mini" disable-transitions>上线</el-tag>
            <el-tag v-if="scope.row.status === -1" type="info" size="mini" disable-transitions>下线</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link
              v-has="'agent/agoods/edit'"
              :underline="false"
              type="primary"
              title="编辑"
              @click="edit(scope.row.id)"
            >编辑</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :current-page="params.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="params.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  agoods_index,
  agoods_edit,
  agoods_export
} from '@/api/charge'

export default {
  data() {
    return {
      total: 0,
      loading: true,
      emtypetxt: '',
      list: [],
      levellist: [{
        val: '1',
        txt: '一级'
      }, {
        val: '2',
        txt: '二级'
      }, {
        val: '3',
        txt: '三级'
      }],
      statuslist: [{
        val: '1',
        txt: '上线'
      }, {
        val: '-1',
        txt: '下线'
      }],
      params: {
        s_agent_id: '',
        's_agent*name': '',
        's_agent*level': '',
        's_goods*price': '',
        'ss_agent*name': 'LIKE',
        s_status: '',
        page: 1,
        pagesize: 10
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.emtypetxt = '加载中...'
      this.loading = true
      agoods_index(this.params).then(res => {
        this.list = res.data.list
        this.total = res.data.total
        this.loading = false
        if (this.list.length == 0) {
          this.emtypetxt = '暂无数据'
        }
      })
    },
    handleRet() {
      this.params = {
        s_agent_id: '',
        's_agent*name': '',
        's_agent*level': '',
        's_goods*price': '',
        'ss_agent*name': 'LIKE',
        s_status: '',
        page: 1,
        pagesize: 10
      }
      this.getList()
    },
    handleSearch() {
      this.params.page = 1
      this.getList()
    },
    // 分页
    handleSizeChange(val) {
      this.params.pagesize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.getList()
    },

    edit(id) {
      this.$modalForm(agoods_edit({
        id: id
      })).then(() => this.getList())
    },

    down() {
      const loading = this.$loading({
        lock: true,
        text: '正在导出...',
        spinner: 'el-icon-loading',
        background: 'rgba(20, 20, 20, 0.7)'
      })
      agoods_export(this.params).then(res => {
        const {
          export_json_to_excel
        } = require('../../assets/js/Export2Excel')
        const tHeader = res.data.header
        const filterVal = res.data.filter
        const list = res.data.list
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, res.data.ename)
        loading.close()
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
